<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .dialog {
        /*? 遮罩层 初始没有 打开弹出框才有*/
        display: none;
        /*? 固定定位*/
        position: fixed;
        /*? 使其在文档流上层 实现遮罩的效果*/
        z-index: 1;
        /*? 占满全屏*/
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        /*? 透明遮罩*/
        background-color: rgba(0, 0, 0, 0.5);
    }

    .dialog-content {
        /*? 弹出框内容层*/
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
</style>
<body>
<button onclick="openDialog()">打开弹出框</button>
<!--? 遮罩层-->
<div id="dialog" class="dialog">
    <div class="dialog-content">
        <span class="close" onclick="closeDialog()">X</span>
        <h2>这是一个弹出框</h2>
        <p>这里可以添加你想要展示的内容。</p>
    </div>
</div>
<script>
    function openDialog() {
        const dialog = document.getElementById("dialog");
        dialog.style.display = "block";
    }

    function closeDialog() {
        const dialog = document.getElementById("dialog");
        dialog.style.display = "none";
    }
</script>
</body>
</html>
